<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">
        window.onload=function () {
            var items=document.getElementsByName("items");//所有的都需要写在最前面 获得name=items的数组
            var checkedAllBox=document.getElementById("checkedAllBox");//获取全选/全不选的多选框
            //举例1全选checkedAllBtn
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick=function () {

                for (var i=0;i<items.length;i++){
                    items[i].checked=true;//设置四个按钮选中状态
                }//遍历items//通过多选框checked属性可以获取或设置多选狂的选中状态
                checkedAllBox.checked=true;//当全选时 全选/全不选按钮设置为选中
            };
            //举例2 全 不 选
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function () {
                for (var i=0 ;i<items.length;i++){
                    items[i].checked=false;
                }
                checkedAllBox.checked=false;
            };
            //举例3反 选 如果是true 改成false
            var checkedRevBtn=document.getElementById("checkedRevBtn");
            //在反选时也需要判断四个多选框是否全都选中
            checkedAllBox.checked=true;//默认全选
            checkedRevBtn.onclick=function () {
                for(var i=0;i<items.length;i++){
                    // if (items[i].checked){//items[i].checked==true没必要这样写 因为items[i].checked本身就是一个布尔值
                    //     items[i].checked=false;
                    // } else{
                    //     items[i].checked=true;
                    // }第一种方法
                    items[i].checked=!items[i].checked; //第二种方法  取反
                    //只要有一个没选中则不是全选
                    if(!items[i].checked){//!取反
                        //一旦进入判断 则证明不是全选状态，checkedAllBox设置为false
                        //一旦进入判断 则已经得出结果，不用在继续执行循环
                        checkedAllBox.checked=false;
                }
                }

            };
            //举例4 提交 点击按钮之后将所有选中的对话框的value属性值弹出
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function () {
                for(var i=0;i<items.length;i++){
                    //判断多选框是否被选中
                    if(items[i].checked){
                        alert(items[i].value);//如果items[i].checked值为true 则弹出value的值
                    }
                }
            };
            //举例5 checkedAllBox 全选/全不选  当它选中时，其余的也选中，当它取消时其他也取消
            //this的第五种用法，在事件的响应函数中，响应函数是给谁绑定的 this就是谁

            checkedAllBox.onclick=function () {
                // alert(this===checkedAllBox);//返回true 所以这里的this就是checkedAllBox
                for(var i=0;i<items.length;i++){

                    items[i].checked=this.checked;
                }
            };
            //举例6items 如果四个多选框全部选中，则checkedAllBox也应该被选中
            //如果四个多选框没都被选中，则checkedAllBox也不应该被选中
            //为四个多选框绑定单击函数

            for (var i=0;i<items.length;i++){
                checkedAllBox.checked=true;//默认全选
                items[i].onclick=function () {
                //判断4个多选框是否被选中
                    for (var j=0;j<items.length;j++){
                        //只要有一个没选中则不是全选
                        if(!items[j].checked){//!取反
                            //一旦进入判断 则证明不是全选状态，checkedAllBox设置为false
                            //一旦进入判断 则已经得出结果，不用在继续执行循环
                            checkedAllBox.checked=false;
                            break;
                        }

                    }
                }
            }

        };
    </script>
</head>
<body>

<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
</form>
</body>
</html>